<template>
	<view class="">
		<!-- 导航栏 -->
		<u-navbar
			title="个人中心"
			:is-back="false"
			:title-bold="true"
			:background="background"
			title-color="#fff"
			:border-bottom="false"
		></u-navbar>

		<!-- 主体内容 -->
		<view class="content_box">
			<!-- 顶部 -->
			<view class="top_box">
				<view class="user_info">
					<u-image
						shape="circle"
						width="130rpx"
						height="130rpx"
						:src="userInfo.avatarUrl || defaultAcatar"
					></u-image>
					<text v-if="!userInfo.id" class="login_text" @click="loginBtn">登录 / 注册</text>
					<text v-else class="login_text">{{ userInfo.nickName }}</text>
					<!-- <button
						v-if="!userInfo.id"
						open-type="getPhoneNumber"
						@getphonenumber="loginBtn"
						:plain="true"
						class="login_btn"
					>
						
					</button> -->
					<!-- <button @click="getAv">获取头像</button> -->
				</view>
				<u-image width="48rpx" height="48rpx" :src="'set.png' | ossName" @click="addressModify"></u-image>
			</view>

			<!-- 选项 -->
			<view class="option_box">
				<view class="option_item" @click="addevaluate">
					<u-section title="我的评价" :sub-title="`${userInfo.countEvaluate}条未评价`" :show-line="false" ></u-section>
					<u-line />
				</view>
				<view class="option_item" @click="addressModify">
					<u-section
						title="地址管理"
						:sub-title="userInfo.countAddress ? `已添加${userInfo.countAddress}个地址` : '未添加地址'"
						:show-line="false"
					></u-section>
					<u-line />
				</view>
				<view class="option_item" @click="provideDishName">
					<u-section title="我要报菜单" sub-title="向厨师报您想吃的菜～" :show-line="false"></u-section>
					<u-line />
				</view>
				<view class="option_item" @click="account">
					<u-section title="账号设置" sub-title=" " :show-line="false"></u-section>
					<u-line />
				</view>
				<view class="option_item" @click="feedback">
					<u-section title="意见反馈" sub-title=" " :show-line="false"></u-section>
					<u-line />
				</view>
				<view class="option_item" @click="contactBtn">
					<u-section title="联系商家" sub-title=" " :show-line="false"></u-section>
					<u-line />
				</view>
				<!-- <button open-type="contact" id="contact">联系客服</button> -->
			</view>
		</view>

		<!-- 联系我们 -->
		<Contact ref="contact" />
		<!-- 报菜名 -->
		<ProvideDish ref="provideDish" />
		<!-- 底部导航栏 -->
		<Tabbar />
	</view>
</template>

<script>
import Contact from '@/components/Contact'
import ProvideDish from '@/components/ProvideDish'
import { wacUserInfo } from '@/api/user'

export default {
	components: {
		Contact,
		ProvideDish
	},
	data() {
		return {
			background: {
				backgroundColor: '#ff9900'
			},
			// 登录code
			loginCode: '',
			// 用户信息
			userInfo: {},
			// 微信用户信息
			wxUserInfo: {},
			// 默认头像
			defaultAcatar: 'https://ckscm.oss-cn-shenzhen.aliyuncs.com/rop_applet_material/image/default.jpeg'
		}
	},
	onLoad() {
	},
	onShow() {
		try {
			const value = uni.getStorageSync('token')
			if (value) {
				this.getUserInfo()
			} else {
				this.getWxUserInfo()
				this.userInfo = {}
			}
		} catch (e) {
			// error
			this.getWxUserInfo()
			this.userInfo = {}
		}
	},
	methods: {
		getAv() {
			uni.getUserProfile({
				desc: '获取用户头像呢称用于识别用户',
				success: (infoRes) => {
					console.log(infoRes)
					this.wxUserInfo = infoRes.userInfo
				}
			})
		},
		// 获取用户信息
		async getUserInfo() {
			const { data } = await wacUserInfo()
			this.userInfo = data
			console.log(data, "地址数")
		},
		// 联系商家
		contactBtn() {
			this.$refs.contact.open()
		},
		// 我要报菜名
		provideDishName() {
			this.$refs.provideDish.showModal()
		},
		// 地址管理
		account() {
			uni.navigateTo({
				url: '/pages/my/account/index'
			})
		},
		// 地址管理
		addressModify() {
			uni.navigateTo({
				url: '/pages/my/address'
			})
		},
		// 待评价
		addevaluate() {
			uni.navigateTo({
				url: '/pages/my/addEvaluate'
			})
		},
		async loginBtn(val) {
			uni.reLaunch({
				url: '/pages/login/login'
			})
		},
		feedback() {
			uni.navigateTo({
				url: '/pages/common/feedback'
			})
		}
	}
}
</script>

<style>
page {
	background-color: #eeeeee;
}
</style>

<style scoped lang="scss">
.top_box {
	background-color: $global-color-bk;
	width: 100%;
	height: 250rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 44rpx;

	.user_info {
		display: flex;
		align-items: center;

		.login_text {
			color: #fff;
			font-size: 36rpx;
			margin-left: 40rpx;
		}

		.login_btn {
			border: none;
			color: #fff;
		}
	}
}

.option_box {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
}

::v-deep .u-section {
	padding: 35rpx 20rpx;
}
</style>
